<template>
    <div class="shopcart-container">
        <div v-if="cartList.length==0">
            <van-image :src="require('@/assets/images/shopcart_empty.png')" width="100%"></van-image>
        </div>
        <div v-else>
            <!-- 全选 清空  -->
            <div class="cart_header">
                <div class="cart_title">
                    <!-- 全选 -->
                    <van-checkbox checked-color="#000000" icon-size="18" v-model="isCheckedAll" @click="onSelectAll">全选
                    </van-checkbox>
                </div>
                <div @click="onClickDeleteAll">
                    <van-icon name="delete" />
                    <span>清空</span>
                </div>
            </div>
            <!-- 商品列表区域 -->
            <div class="cart-item-list">
                <van-row v-for="(item, i) in cartList" :key="i" type="flex" align="center">
                    <van-col span="2">
                        <!-- 复选框 -->
                        <van-checkbox v-model="item.is_checked" @change="onCheckedChange(item)" />
                    </van-col>

                    <van-col span="5">
                        <!-- 中间商品图片 -->
                        <van-image size="80" :src="APIDomainName + item.pic"></van-image>
                    </van-col>

                    <van-col span="17">
                        <van-row class="van-multi-ellipsis--l2 title">{{ item.title }}</van-row>
                        <van-row type="flex" align="center">
                            <van-col span="8" class="price">¥{{ item.price }}</van-col>
                            <van-col span="16" class="opration">
                                <van-stepper v-model="item.count" @change="onCountChanged(item)" integer />
                                <van-button text="删除" size="small" @click.prevent="onClickDeleteCartItem(item.id)" />
                            </van-col>
                        </van-row>
                    </van-col>
                </van-row>
            </div>

            <!-- 商品结算区域 -->
            <div class="cart-settlement">
                <van-cell title="商品结算" value="总计不含运费"></van-cell>
                <van-cell>
                    <template #title>
                        <span>已勾选商品</span>
                        <span class="red">{{ getCheckedCount }}</span>
                        <span>件，总价</span>
                        <span class="red">¥{{ getCheckedAmount }}</span>
                    </template>
                </van-cell>
            </div>

            <!-- 结算按钮 -->
            <div class="cart-checkout-button">
                <van-button type="primary" size="large" @click="onClickCreateOrder">去结算</van-button>
            </div>
        </div>
    </div>
</template>

<script>
//导入接口
import {
    getCartListAPI, //获取列表
    updateCartCountAPI, //更新数量
    updateCartCheckedAPI, //更新是否勾选
    deleteCartItemAPI, //删除购物车项
    deleteCartAllAPI, //删除清空购物车接口
    updateCartCheckedAllAPI, //全选/全不选购物车项接口
} from "@/api/cart.js";

export default {
    name: "Shopcart",
    data() {
        return {
            cartList: [], //购物车列表
            isCheckedAll: false, //是否全选
        };
    },

    //实例的生命周期函数，实例创建后被调用
    created() {
        this.getCartData(); //初始化购物车数据
    },

    computed: {
        getCheckedCount() { //计算勾选记录总数
            let sum = 0;
            this.cartList.forEach((item) => {
                if (item.is_checked) sum += 1;
            });
            return sum;
        },

        //计算是否全部勾选
        getCheckedAll() {
            return this.cartList.length == this.getCheckedCount ? true : false;
        },

        //统计购物车金额
        getCheckedAmount() {
            let amount = 0;
            this.cartList.forEach((item) => {
                if (item.is_checked) amount += item.price * item.count;
            });
            return amount;
        },

    },

    methods: {
        //获取用户购物车数据
        getCartData() {
            this.cartList = []; //清空
            getCartListAPI().then(result => {
                this.cartList = result.data;
                this.isCheckedAll = this.getCheckedAll; //同步是否全选
            }).catch(() => {});
        },

        //触发更改购物商品选中状态
        onCheckedChange(item) {
            let id = item.id;
            let is_checked = item.is_checked == true ? 1 : 0;
            let params = {
                id,
                is_checked
            };
            updateCartCheckedAPI(params).then(() => {
                this.isCheckedAll = this.getCheckedAll; //同步是否全选
            }).catch(() => {});
        },

        //触发更改购物商品数量
        onCountChanged(item) {
            let params = {
                id: item.id,
                count: item.count
            };
            updateCartCountAPI(params).then(() => {});
        },

        //触发删除购物商品
        onClickDeleteCartItem(id) {
            let ids = id;
            deleteCartItemAPI(ids).then(() => {
                this.getCartData(); //刷新列表数据
            });
        },

        //触发全选/全不选
        onSelectAll() {
            //准备参数
            let is_checked = this.isCheckedAll == true ? 1 : 0;
            //调用接口
            updateCartCheckedAllAPI(is_checked).then(() => {
                this.getCartData(); //刷新列表数据
            });
        },

        //触发清空
        onClickDeleteAll() {
            this.$dialog.confirm({
                message: '客官，您确定清空购物车吗?'
            }).then(() => {
                deleteCartAllAPI().then(() => {
                    this.getCartData(); //刷新列表数据
                });
            })
        },

        //触发创建订单
        onClickCreateOrder() {
            if (this.cartList.length === 0) {
                this.$toast("您的购物车为空");
                return;
            }

            //this.$toast("这个路由功能还没实现...");
            this.$router.push({
                name: "orderCreate"
            });
        },
    }
}
</script>

<style lang="less" scoped>
.shopcart-container {
    padding: 20px;
    background-color: #f9f9f9;
}

.cart_header {
    padding: 15px;
    margin: 15px 0;
    background-color: white;
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.cart-item-list {
    .van-row {
        padding: 15px;
        margin-bottom: 15px;
        background-color: white;
        border-radius: 8px;
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
        transition: all 0.3s ease;

        &:hover {
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
            transform: translateY(-2px);
        }
    }

    .title {
        padding: 5px 0;
        font-size: 16px;
        font-weight: bold;
    }

    .price {
        padding-left: 10px;
        text-align: left;
        font-size: 18px;
        font-weight: bold;
        color: red;
        display: flex;
        align-items: center;
    }

    .opration {
        padding-right: 10px;
        display: flex;
        align-items: center;
        justify-content: flex-end;
    }
}

.cart-settlement {
    margin-top: 20px;
    padding: 15px;
    background-color: white;
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);

    .van-cell {
        font-size: 16px;
    }

    .red {
        color: red;
        font-weight: bold;
        font-size: 18px;
    }
}

.cart-checkout-button {
    margin-top: 20px;
    text-align: center;
}
</style>